
<link rel="stylesheet" href="openplay_reg.css" type="text/css"/>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="google-spreadsheet.js"></script>
<script type="text/javascript" src="openplay_reg.js"></script>
<script type="text/javascript" src="openplay_reg_fns.js"></script>
<script type="text/javascript" src="openplay_functions.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  var geocoder;
  var centerChangedLast;
  var reverseGeocodedLast;
  var currentReverseGeocodeResponse;
  var marker_count=0;
	
  function initialize() {
    var latlng = new google.maps.LatLng(32.5468,-23.2031);
    var myOptions = {
      zoom: 2,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scaleControl: true
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    setupEvents();
    centerChanged();
  }
  

  function setupEvents() {
    reverseGeocodedLast = new Date();
    centerChangedLast = new Date();

    google.maps.event.addListener(map, 'center_changed', centerChanged);

    google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
       map.setZoom(map.getZoom() + 1);
    });

  }

  function getCenterLatLngText() {
    return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
  }

  function centerChanged() {
    centerChangedLast = new Date();
    var latlng = getCenterLatLngText();
    document.getElementById('latlng').innerHTML = latlng;
    document.getElementById('address').innerHTML = '';
    currentReverseGeocodeResponse = null;
  }

  function reverseGeocode() {
    reverseGeocodedLast = new Date();
    geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
  }

  function reverseGeocodeResult(results, status) {
    currentReverseGeocodeResponse = results;
    if(status == 'OK') {
      if(results.length == 0) {
        document.getElementById('formatedAddress').innerHTML = 'None';
      } else {
        document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
      }
    } else {
      document.getElementById('formatedAddress').innerHTML = 'Error';
    }
  }


  function geocode() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
      'address': address,
      'partialmatch': true}, geocodeResult);
    
  }

  function geocodeResult(results, status) {
    if (status == 'OK' && results.length > 0) {
      map.fitBounds(results[0].geometry.viewport);
      nearbyOpenPlayMarkers(results, map);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  }
  
  function nearbyOpenPlayMarkers(results, map) {
	  //https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957 	  
  }
  
  function placeMarker(position, map) {
	  var marker = new google.maps.Marker({
	    position: position,
	    map: map,
	    draggable: false
	  });
  }

  function addMarkerAtCenter() {
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        draggable: false
    });
    marker_count++;
    var text = 'Marker Number: ' + marker_count.toString() + '<br>' + 'Lat/Lng: ' + getCenterLatLngText();
    if(currentReverseGeocodeResponse) {
      var addr = '';
      if(currentReverseGeocodeResponse.size == 0) {
        addr = 'None';
      } else {
        addr = currentReverseGeocodeResponse[0].formatted_address;
      }
      text = text + '<br>' + 'address: <br>' + addr;
    }

    var infowindow = new google.maps.InfoWindow({ content: text });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }
  
  function submit_annotation() {
	    var genericname = document.getElementById('generic_name').value;
	  	var note = document.getElementById('annot').value;
	  	var activity = document.getElementById('Activity').value;
	  	var tplace = document.getElementById('Place').value;
	  	var charter = document.getElementById('Charter').value;
	  	var other = document.getElementById('Other').value;
	  	var myOpenPlayPlaceReg;
	  	centerChangedLast = new Date();
	    var latlng = getCenterLatLngText();
	    myOpenPlayPlaceReg = 
	    					 "Mail To: openplayhuman@gmail.com\n"+
	    					 "Subject: This is my OpenPlay suggestion/review for a new place.\n"+
	    					"\"NOTE: Altering any of the text in this email will cause your suggested/reviewed place to be ignored.\"\n";
	  	myOpenPlayPlaceReg = myOpenPlayPlaceReg + "Thank you!\n\n"+
	  											">Activity=" + activity + "\n" +
	  											">Other=" + other + "\n" +
	  											">Place=" + tplace + "\n" +
	  											">Charter=" + charter + "\n" +
	  											">Description=" + note + "\n" + 
	  											">Lat-Lng=" + latlng + "\n"; 
	  	sendMail(myOpenPlayPlaceReg);
  	document.getElementById("p1").innerHTML="You have submitted marker: " + marker_count + " " + genericname + " " + activity + " " + note + " " + latlng;

  }
  
  function submit_cutpaste() {
	  
	    var genericname = document.getElementById('generic_name').value;
	  	var note = document.getElementById('annot').value;
	  	var activity = document.getElementById('Activity').value;
	  	var tplace = document.getElementById('Place').value;
	  	var charter = document.getElementById('Charter').value;
	  	var other = document.getElementById('Other').value;
	  	var myOpenPlayPlaceReg;
	  	centerChangedLast = new Date();
	    var latlng = getCenterLatLngText();
	    myOpenPlayPlaceReg = "<p style=\"background-color:lightyellow;\">"+
	    					 "Mail <b>To: </b>openplayhuman@gmail.com<br>"+
	    					 "With <b>Subject: </b>This is my OpenPlay suggestion/review for a new place.<br>"+
	    					 "</p>"+
	    					 "<br>And copy and paste the following into the body of email and send to openplayhuman@gmail.com<br>"+
	    					"<b>\"NOTE:</b> <i>Altering any of the text in this email will cause your suggested/reviewed place to be ignored.\"</i><br>";
	  	myOpenPlayPlaceReg = myOpenPlayPlaceReg + "Thank you!<br>"+
	  											"<br>--------------------------------  Copy From Here -------------------------------------------------<br>" +
	  											"<p style=\"background-color:lightyellow;\">"+
	  											">Name=" + genericname + "<br>" + 
	  											">Activity=" + activity + "<br>" +
	  											">Other=" + other + "<br>" +
	  											">Place=" + tplace + "<br>" +
	  											">Charter=" + charter + "<br>" +
	  											">Description=" + note + "<br>" + 
	  											">Lat-Lng=" + latlng + "<br>" + 
	  										    "</p>"+
	  											"------------------------------------- To Here ---------------------------------------------------------<br>"; 
	  											
	  	//sendMail(myOpenPlayPlaceReg);
	  	document.getElementById("p2").innerHTML=myOpenPlayPlaceReg;

  }
 
  function populateList() {
  	// USAGE: openplay_get_sscol(ss_name,attribute_name, description_in_html)
    openplay_get_unique('OpenPlay Activity','Activity','Type of Activity:');
  	openplay_get_unique('OpenPlay Activity','Place','Type of Place:');
  	openplay_get_unique('OpenPlay Activity','Charter','Type of Restricitions:');
  }
  

  function sendMail(myOpenPlayPlaceReg) {
	    var link = "mailto:openplayhuman@gmail.com"
	    	     + "?cc="
	             + "&subject=" + escape("Subject:This is my OpenPlay suggestion/review for a new place.")
	             + "&body=" + escape(myOpenPlayPlaceReg)
	    ;

	    window.location.href = link;
  }
//google.setOnLoadCallback(drawVisualization);
</script>

<body onload="initialize(); populateList();">
  <div id="map">
    <div id="map_canvas" style="idth:100%; height:400px"></div>
    <div id="crosshair"></div>
  </div>
  <i><font size="1">V 0.9b</font></i><br><b> Use the six steps below to suggest/review a new activity/place for OpenPlay users.</b>
  <br><font color="red">*</font> - <i>Indicates a required entry.</i>
  <l id="p2"></l>
  <br><b>1:</b>  Find your place: <input type="text" placeholder="(e.g. zip code, city name and country)" id="address" size=40/><input type="button" value="Go" onclick="geocode()">
  <br><b>2:</b>  Refine the location by double clicking (zooming in) and use the satellite mode/image to find the local features.
  <br><b>3:</b>   <input type="button" value="Drop a Marker at Center" onclick="addMarkerAtCenter()"/>
  Lat/Lng:<l id="latlng"></l>
  <l id="p1"></l>
  <div>
  <b>4:</b>  Give it a name (others will know): <font color="red">*</font><input type="text" id="generic_name"/></div>

  <b>5:</b>  Suggest an Activity (try to include addtional descriptions):<font color="red">*</font>
  <form action="#" method="" name="form1" id="form1">
  <p id = "text_form1"><p>
  <!-- built up from script here -->
  </form>
  <i>&nbsp If other please describe new activity: </i><input type="text" placeholder="(e.g. ping-pong)" id="Other" size=40/> 
  <div id="annotation">
  <b>6:</b>  Write something about this marker(s)<br>
    <textarea name="annotation" id="annot" rows=4 cols=80 >
	</textarea><br>
	<input type="button" value="copy and paste into Email to OpenPlay" onclick="submit_cutpaste()"/>    
    <b>OR</b>
    <input type="button" value="try your Email client to OpenPlay" onclick="submit_annotation()"/>
  </div>
</body>

